<html>
  <head>
    <title>Home</title>
    <script th:src="@{/webjars/sockjs-client/0.3.4/sockjs.min.js}"></script>
    <script th:src="@{/webjars/jquery/2.0.3/jquery.min.js}"></script>
  </head>
  <body>
    <button id="stop">Stop</button>
  
    <script th:inline="javascript">
      var sock = new SockJS([[@{/marco}]]);

      sock.onopen = function() {
    	  console.log('Opening');
    	  sayMarco();
      }
      
      sock.onmessage = function(e) {
    	  console.log('Received message: ', e.data);
    	  $('#output').append('Received "' + e.data + '"<br/>');
    	  setTimeout(function(){sayMarco()}, 2000);
      }
      
      sock.onclose = function() {
    	  console.log('Closing');
      }
      
      function sayMarco() {
    	  console.log('Sending Marco!');
    	  $('#output').append('Sending "Marco!"<br/>');
    	  sock.send("Marco!");
      }

      $('#stop').click(function() {sock.close()});
      </script>
    
    <div id="output"></div>
  </body>
</html>
